<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="user-scalable=1.0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />
    <title>Rich Editor</title>
    <link href="main.css" type="text/css" rel="stylesheet" />
  </head>
  <body>
    <svg style="position: absolute; height: 0; visibility: hidden; width: 0">
      <defs>
        <filter id="tint-12">
          <feFlood flood-color="#2095F2"></feFlood>
          <feComposite in2="SourceAlpha" operator="atop"></feComposite>
        </filter>
        <filter id="tint-13">
          <feFlood flood-color="#72787e"></feFlood>
          <feComposite in2="SourceAlpha" operator="atop"></feComposite>
        </filter>
      </defs>
    </svg>
    <center>
      <div class="mobile">
        <div class="status-bar" style="height: 34px">
          <div class="time"></div>
          <div class="signal">
            <svg xmlns="http://www.w3.org/2000/svg" width="17" height="12">
              <path
                d="M1.25 6.5h1a1 1 0 0 1 1 1V10a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1V7.5a1 1 0 0 1 1-1zM5.75 5h1a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm4.5-2h1a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm4.5-2h1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z"
                fill-rule="evenodd" />
            </svg>
          </div>
          <div class="wifi">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="12">
              <path
                d="M8.007 2.787a8.64 8.64 0 0 1 5.953 2.379c.12.118.314.116.433-.004l1.156-1.166a.322.322 0 0 0-.003-.456 10.897 10.897 0 0 0-15.08 0 .322.322 0 0 0-.003.456L1.62 5.162c.119.12.312.122.433.004a8.641 8.641 0 0 1 5.954-2.379zm0 3.796c1.217 0 2.391.452 3.294 1.27a.31.31 0 0 0 .433-.006l1.155-1.167a.322.322 0 0 0-.005-.459 7.16 7.16 0 0 0-9.752 0 .322.322 0 0 0-.005.46l1.155 1.166a.31.31 0 0 0 .433.006 4.907 4.907 0 0 1 3.292-1.27zm2.219 2.784a.314.314 0 0 0-.01-.457 3.422 3.422 0 0 0-4.42 0 .314.314 0 0 0-.009.457l1.998 2.016a.312.312 0 0 0 .443 0l1.998-2.016z"
                fill-rule="nonzero" />
            </svg>
          </div>
          <div class="battery">
            <svg xmlns="http://www.w3.org/2000/svg" width="25" height="12">
              <path
                d="M2.667 1.333C1.747 1.333 1 2.08 1 3v6c0 .92.746 1.667 1.667 1.667h16.666C20.253 10.667 21 9.92 21 9V3c0-.92-.746-1.667-1.667-1.667H2.667zm0-1h16.666A2.667 2.667 0 0 1 22 3v6a2.667 2.667 0 0 1-2.667 2.667H2.667A2.667 2.667 0 0 1 0 9V3A2.667 2.667 0 0 1 2.667.333z"
                opacity=".35" />
              <path d="M23 4v4a2.17 2.17 0 0 0 0-4" opacity=".4" />
              <rect x="2" y="2.333" width="18" height="7.333" rx="1.333" />
            </svg>
          </div>
        </div>
        <div class="nav">
          <span class="title">Rich Editor</span>
        </div>
        <iframe id="editor"></iframe>
        <div class="toolbar">
          <img class="icon" src="../img/image@2x.png" onclick="editor.onToolbarClick(this.id)" id="image" />
          <img class="icon" src="../img/bold@2x.png" onclick="editor.onToolbarClick(this.id)" id="bold" />
          <img class="icon" src="../img/italic@2x.png" onclick="editor.onToolbarClick(this.id)" id="italic" />
          <img
            class="icon"
            src="../img/strikethrough@2x.png"
            onclick="editor.onToolbarClick(this.id)"
            id="strikeThrough" />
          <img class="icon" src="../img/underline@2x.png" onclick="editor.onToolbarClick(this.id)" id="underline" />
          <span class="icon" onclick="editor.onToolbarClick(this.id)" id="heading1">H1</span>
          <img class="icon" src="../img/ul@2x.png" onclick="editor.onToolbarClick(this.id)" id="unorderedList" />
          <img class="icon" src="../img/ol@2x.png" onclick="editor.onToolbarClick(this.id)" id="orderedList" />
          <img class="icon" src="../img/checkbox@2x.png" onclick="editor.onToolbarClick(this.id)" id="checkboxList" />
          <img class="icon" src="../img/code@2x.png" onclick="editor.onToolbarClick(this.id)" id="code" />
          <img class="icon" src="../img/blockquote@2x.png" onclick="editor.onToolbarClick(this.id)" id="quote" />
          <img class="icon" src="../img/line@2x.png" onclick="editor.onToolbarClick(this.id)" id="line" />
          <img class="icon" src="../img/link@2x.png" onclick="editor.onToolbarClick(this.id)" id="link" />
        </div>
        <div class="bottom">
          <div class="rounded-bar"></div>
        </div>
      </div>
    </center>

    <script type="module">
      import {actions, messages} from '../src/const.js';
      import {createHTML} from '../src/editor.js';

      const HTML = createHTML({
        cssText: 'html {overflow-y: auto;}',
        pasteAsPlainText: false,
        useContainer: false,
      });
      window.actions = actions;
      const initHTML = `
<br/>
<center><b>Rich Editor</b></center>
<center>
<a href="https://github.com/wxik/react-native-rich-editor">React Native</a>
<span>And</span>
<a href="https://github.com/wxik/flutter-rich-editor">Flutter</a>
</center>
<div style="padding:10px 0;" contentEditable="false">
<iframe  width="100%" height="200"  src="https://www.youtube.com/embed/6FrNXgXlCGA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<br/>
<div><center><img src="https://img.lesmao.vip/k/h256/R/MeiTu/1293.jpg" /></center></div>
<br/><br/>
`;
      const selectionChangeListeners = [];
      const webview = document.querySelector('#editor');
      const childDoc = webview.contentWindow.document;
      childDoc.open();
      childDoc.write(HTML);
      childDoc.close();

      // toolbar selected
      selectionChangeListeners.push({
        routeKey: function (items) {
          const icons = document.querySelectorAll('.toolbar .icon');
          icons.forEach(da => {
            if (items.indexOf(da.id) !== -1) {
              da.classList.add('selected');
            } else {
              da.classList.remove('selected');
            }
          });
        },
      });
      window.editor = (function () {
        const editor = {
          _sendAction(type, action, data) {
            let jsonString = JSON.stringify({type, name: action, data});
            webview.contentWindow.postMessage(jsonString);
          },

          focusContentEditor() {
            this._sendAction(actions.content, 'focus');
          },

          setContentHTML(html) {
            this._sendAction(actions.content, 'setHtml', html);
          },

          init() {
            webview.contentWindow.addEventListener('click', () => this.focusContentEditor(), false);
            webview.contentWindow.document.body.addEventListener('click', event => event.stopPropagation(), false);
            editor.setContentHTML(initHTML);
          },

          onPressAddImage() {
            this._sendAction(
              actions.insertImage,
              'result',
              'https://pbs.twimg.com/profile_images/1242293847918391296/6uUsvfJZ.png',
            );
          },

          onToolbarClick(action) {
            switch (action) {
              case actions.insertLink:
              case actions.setBold:
              case actions.setItalic:
              case actions.heading1:
              case actions.heading2:
              case actions.insertBulletsList:
              case actions.insertOrderedList:
              case actions.checkboxList:
              case actions.indent:
              case actions.outdent:
              case actions.code:
              case actions.line:
              case actions.blockquote:
              case actions.setStrikethrough:
              case actions.setUnderline:
              case actions.removeFormat:
                editor._sendAction(action, 'result');
                break;
              case actions.insertImage:
                this.onPressAddImage();
                break;
              default:
                break;
            }
          },
        };

        webview.onload = function () {
          editor.init();
        };

        window.addEventListener(
          'message',
          function (event) {
            if (typeof event.data === 'object') return;
            const message = JSON.parse(event.data);
            // console.log('webview', message)
            switch (message.type) {
              case messages.SELECTION_CHANGE: {
                const items = message.data;
                selectionChangeListeners.map(listener => listener(items));
                break;
              }
              case messages.CONTENT_CHANGE: {
                // console.log(message.data)
                break;
              }
              case messages.OFFSET_HEIGHT:
                // this.setWebHeight(message.data);
                break;
            }
          },
          false,
        );
        return editor;
      })();

      +(function () {
        const time = document.querySelector('.time');

        function dtTime() {
          const date = new Date();
          const m = date.getMinutes();
          time.innerText = `${date.getHours()}:${m < 10 ? '0' + m : m}`;
        }

        setInterval(dtTime, 500);
        dtTime();
      })();
    </script>
  </body>
</html>
